﻿<MCard Id="lateral">
    <MToolbar Dark
              Flat
              Color="indigo">
        <ChildContent>
            <MAppBarNavIcon></MAppBarNavIcon>
            <MToolbarTitle>Page title</MToolbarTitle>
            <MSpacer></MSpacer>
            <MButton Icon>
                <MIcon>mdi-magnify</MIcon>
            </MButton>
            <MButton Icon>
                <MIcon>mdi-dots-vertical</MIcon>
            </MButton>
        </ChildContent>
        <ExtensionContent>
            <MTabs @bind-Value="tab" AlignWithTitle SliderColor="pink" @key="tab">
                <MTab Value="@("one")">
                    Item One
                </MTab>
                <MTab Value="@("two")">
                    Item Two
                </MTab>
                <MTab Value="@("three")">
                    Item Three
                </MTab>
            </MTabs>
        </ExtensionContent>
    </MToolbar>
    <MCardText>
        <MTabsItems @bind-Value="tab">
            @foreach (var item in Items)
            {
                <MTabItem Value="item" @key="item">
                    <MCard Height="@("200px")" Flat>
                    </MCard>
                </MTabItem>
            }
        </MTabsItems>
    </MCardText>
    <FabTransition Mode="@TransitionMode.OutIn">
        <MButton Color="@GetActiveFabColor()" Fab Large Dark Bottom Left Class="m-btn--example" Key="@GetActiveFabIcon()">
            <MIcon> @GetActiveFabIcon() </MIcon>
        </MButton>
    </FabTransition>
</MCard>

<style type="text/css">
    #lateral .m-btn--example {
        bottom: 0;
        position: absolute;
        margin: 0 0 16px 16px;
    }
</style>

@code {
    private StringNumber tab = "one";

    List<string> Items = new List<string>() { "one", "two", "three" };

    private dynamic ComputedActiveFab()
    {
        switch (tab.AsT0)
        {
            case "one":
                return new { Color = "success", Icon = "mdi-share-variant" };
            case "two":
                return new { Color = "red", Icon = "mdi-pencil" };
            case "three":
                return new { Color = "green", Icon = "mdi-chevron-up" };
            default:
                return new { Color = "", Icon = "" };
        }
    }

    public string GetActiveFabColor()
    {
        var activeFab = ComputedActiveFab();
        return activeFab.Color;
    }

    public string GetActiveFabIcon()
    {
        var activeFab = ComputedActiveFab();
        return activeFab.Icon;
    }
}
